<template>
  <div style="background: #f7f8f8;height: 100%;" class="content">
    <div class="titles">
      <h3 class="title-h3">订单</h3>
    </div>
    <div v-if="isLogin" class="margin-top">
      <div v-if="haveOrder === false" class="haveOrder">
        <div style="text-align: center;width: 7rem;margin: 0 auto;">
          <img src="../../../static/dengluwugoumai.png" alt="" style="width: 100%;"/>
        </div>
        <div class="noOrder-div">您还没有相关订单，到首页看看吧！</div>
        <div class="toLogin" @click="toZulin">随便逛逛</div>
        <div class="goods">
          <p class="caiyicai">猜你喜欢</p>
          <div>
            <div
              class="card"
              :class="index % 2 ? 'fr' : 'fl'"
              v-for="(item, index) in goodsList"
              :key="index"
              @click="goGoods(index)">
              <a>
                <div class="cardImg-div">
                  <img :src="'http://47.92.123.35:9090/' + item.top_img"/>
                </div>
                <div class="cardDesc-div">
                  <p class="price">{{item.goods_price | money}}/天起</p>
                  <p class="desc">{{item.goods_title}}</p>
                </div>
              </a>
            </div>
            <br style="clear: both;"/>
          </div>
          <p class="noMore">没有更多</p>
        </div>
      </div>
      <div v-else-if="haveOrder === null"></div>
      <!--orderList-->
      <div v-else class="list-ul">
        <ul class="flex-ul">
          <li
            class="flex-li"
            v-for="(item, index) in stateList"
            @click="select(index)"
            :class="{active: isActive === index}"
            :key="index">{{item}}</li>
        </ul>
        <ul style="padding: 0 3%;">
          <li
            class="order-li"
            v-for="(item, index) in orderLists"
            :key="index"
            @click="toOrderPage(index)">
            <div class="order-state">{{item.order_state}}</div>
            <div style="padding-bottom: .5rem;">
              <div class="order-flex">
                <div class="div-img">
                  <img style="width: 100%;" :src="'http://47.92.123.35:9090/' + item.top_img" alt="" />
                </div>
                <div class="div-desc">
                  <div class="order-name">{{item.goods_name}}</div>
                  <div class="order-memory">
                    <span>{{item.goods_color}}</span>
                    <span>{{item.goods_memory}}</span>
                  </div>
                  <div class="order-price">
                    <span class="fl">{{item.total_price | money}}</span>&nbsp;*
                    <span class="">{{item.month}}期</span>
                  </div>
                  <div class="order-num">订单编号：123123123123</div> 
                </div>
              </div>
              <div class="succss-div" v-if="item.order_state === '已完成'">
                <p>您已完成该商品订单，感谢您对麦粒儿的支持，欢迎再次租赁其他商品！</p>
                <p class="fr">订单完成时间：2018-07-08 11:00</p>
              </div>
            </div>
            <!--<div>
              <img :src="'http://47.92.123.35:9090/' + item.top_img" alt="" />
            </div>
            <div>
              <div>{{item.goods_name}}</div>
              <div>
                <span>{{item.goods_color}}</span>
                <span>{{item.goods_memory}}</span>
              </div>
              <div>{{item.goods_abstract}}</div>
            </div>-->
          </li>
        </ul>
      </div>
    </div>
    <div v-else class="noOrder margin-top">
      <div style="text-align: center;width: 7rem;margin: 0 auto;">
        <img src="../../../static/wudenglu.png" alt="" style="width: 100%;"/>
      </div>
      <div class="noOrder-div">您还没有登录，请登录后查看订单</div>
      <div class="toLogin" @click="toLogin">立即登录</div>
      <div class="goods">
        <p class="caiyicai">猜你喜欢</p>
        <div>
          <div
            class="card"
            :class="index % 2 ? 'fr' : 'fl'"
            v-for="(item, index) in goodsList"
            :key="index"
            @click="goGoods(index)">
            <a>
              <div class="cardImg-div">
                <img :src="'http://47.92.123.35:9090/' + item.top_img"/>
              </div>
              <div class="cardDesc-div">
                <p class="price">{{item.goods_price | money}}/天起</p>
                <p class="desc">{{item.goods_title}}</p>
              </div>
            </a>
          </div>
          <br style="clear: both;"/>
        </div>
        <p class="noMore">没有更多</p>
      </div>
    </div>
  </div>
</template>

<script>
import {selectByUserNum} from '../../api/order.js'
import {getPart} from '../../api/home.js'
export default {
  data () {
    return {
      isLogin: false,
      userNum: '',
      orderList: [],
      haveOrder: null,
      stateList: [
        '全部',
        '已下单',
        '租赁中',
        '已完成'
      ],
      isActive: 0,
      orderState: '',
      goodsList: [],
    }
  },
  methods: {
    toLogin () {
      this.$router.push({
        path: '/login'
      })
    },
    toZulin () {
      this.$router.push({
        path: '/'
      })
    },
    select (index) {
      this.isActive = index
      this.orderState = this.stateList[index]
      if (this.stateList[index] === '全部') {
        this.orderState = ''
      }
      this.selectByUserNum()
    },
    toOrderPage (index) {
      this.$store.state.orderNum = this.orderList[index].order_num
      this.$router.push({
        path: '/orderPage'
      })
    },
    goGoods (index) {
      this.$store.state.goodsNum = this.goodsList[index].goods_num
      this.$router.push({
        path: '/goods',
        query: {
          path: '/index/order'
        }
      })
    },
    async selectByUserNum () {
      try {
        let data = await selectByUserNum({userNum: this.userNum, orderState: this.orderState})
        console.log(data)
        if (this.orderState === '') {
          if (data.data.length !== 0) {
            this.haveOrder = true
            this.orderList = this.orderLists = data.data
            this.$forceUpdate()
          } else {
            this.haveOrder = false
          }
        } else {
          this.haveOrder = true
          this.orderLists = data.data
          this.$forceUpdate()
        }
//      if (data.data.length !== 0) {
//        this.haveOrder = true
//        this.orderList = data.data
//      } else {
//        this.haveOrder = false
//      }
      } catch (err) {
        console.log(err)
      }
    },
    async getPart () {
      try {
        let data = await getPart({partition: 'guess_like'})
        this.goodsList = data.data
      } catch (err) {
        console.log(err)
      }
    }
  },
  filters: {
    money: function (value) {
      return '￥' + value
    }
  },
  created: function () {
    this.userNum =  localStorage.userNum
    this.$store.state.userNum = localStorage.userNum
    this.isLogin = this.$store.state.isLogin
    this.selectByUserNum()
    this.getPart()
  },
  mounted () {
    let that = this
    var first = null
    mui.init({
      keyEventBind: {
        backbutton: true  //关闭back按键监听
      }
    })
    mui.back = function () {
      if (
        that.$route.name === 'zulin' ||
        that.$route.name === 'order' ||
        that.$route.name === 'person'
      ) {
        if (!first) {
          first = new Date().getTime()
          mui.toast('再按一次退出应用')
          setTimeout(function () {
            first = null
          }, 1000)
          error
        } else {
          if (new Date().getTime() - first < 1000) {
            plus.runtime.quit()
            error
          }
        }
      }
      error
    }
  }
}
</script>

<style scoped>
  .titles{
    height: 1.6rem;
    line-height: 1.6rem;
    position: fixed;
    z-index: 10;
    box-sizing: border-box;
    left: 0;
    right: 0;
    top: 0;
    background: #fff;
  }
  .title-h3{
    text-align: center;
    font-size: .8rem;
  }
  .margin-top{
    margin-top: 1.6rem;
  }
  .noOrder{
    border-radius: .5rem;
    color: #909399;
    line-height: 2.2rem;
    padding-top: 1rem;
  }
  .noOrder-div{
    font-size: .75rem;
    text-align: center;
    margin-top: 1rem;
  }
  .haveOrder{
    border-radius: .5rem;
    color: #909399;
    line-height: 2.2rem;
    padding-top: 1rem;
  }
  .toLogin{
    width: 4.5rem;
    line-height: 2rem;
    background: #e94975;
    font-size: .8rem;
    color: #fff;
    text-align: center;
    border-radius: .5rem;
    margin: 0 auto;
  }
  .title-person{
    text-align: center;
    height: 2rem;
    line-height: 2rem;
  }
  .title-h3{
    font-size: .8rem;
    color: #000;
  }
  .list-ul{
    margin-bottom: 3.2rem;
    overflow-y: scroll;
  }
  .flex-ul{
    display: flex;
    justify-content: space-around;
    font-size: .7rem;
    margin-bottom: .5rem;
    padding: .5rem 0 0;
    background: #fff;
  }
  .flex-li{
    width: 2.5rem;
    border-bottom: 2px solid transparent;
    text-align: center;
    padding-bottom: .3rem;
  }
  .active{
    border-bottom: 2px solid #e94975;
  }
  .order-li{
    background: #fff;
    border-radius: .5rem;
  }
  .order-state{
    background: #e94975;
    color: #fff;
    padding: .25rem;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    font-size: .7rem;
    font-weight: 600;
  }
  .order-flex{
    display: flex;
    padding: .5rem;
  }
  .div-img{
    width: 4rem;
  }
  .div-desc{
    flex: 1;
  }
  .order-name{
    font-size: .7rem;
    font-weight: 600;
  }
  .order-memory{
    font-size: .65rem;
    height: 1.5rem;
    line-height: 1.5rem;
  }
  .order-memory span{
    background: #efefef;
    border-radius: .5rem;
    padding: .2rem;
    margin-right: .3rem;
    box-sizing: border-box;
  }
  .order-num{
    font-size: .7rem;
    color: #9fa0a0;
  }
  .order-price{
    overflow: hidden;
    font-size: .6rem;
  }
  .order-price span{
    color: #e94975;
  }
  .succss-div{
    overflow: hidden;
    margin: 0 auto;
    border: .5rem;
    background: #fff4f7;
    font-size: .5rem;
    width: 90%;
    padding: .3rem;
    color: #9fa0a0;
  }
  .goods{
  /*padding: 0 3%;*/
  background: #f7f8f8;
  margin-top: .5rem;
  line-height: 1rem;
  margin-bottom: 2.2rem;
}
.goods-h3{
  font-size: .9rem;
  padding: .5rem 0;
}
/*详情*/
.card{
  text-align: center;
  background: #fff;
  width: 44%;
  margin-bottom: .5rem;
  border-radius: 0.75rem;
  box-shadow: 0 0 0.3rem #b5b5b6;
}
.card.fl{
  margin-left: 4%;
}
.card.fr{
  margin-right: 4%;
}
.cardImg-div{
  box-sizing: border-box;
  padding: 0 .8rem;
}
.cardImg-div img{
  vertical-align: middle;
}
.cardDesc-div{
  padding: .4rem .4rem .4rem;
  font-size: .7rem;
}
.cardDesc-div p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.desc{
  font-size: .6rem;
  color: #909399;
}
.price{
  font-size: .6rem;
  color: #e94c75;
}
.caiyicai{
  text-align: center;
  margin-bottom: .5rem;
  font-size: .7rem;
  margin-top: 1rem;
  margin-left: 3%;
  margin-right: 3%;
  border-top: 1px solid #e94c75;
  padding-top: .3rem;
}
.noMore{
  text-align: center;
  margin-bottom: .5rem;
  font-size: .7rem;
}
.content {
  /*position: relative;*/
  background: #f7f8f8;
  /*top: 0;*/
  /*z-index: 1;*/
  /*left: 0;*/
  /*bottom: 0; 距离底部的距离为底部盒子的高度，自己也可以设置*/
  overflow-y: scroll;
  width: 100%;
  -webkit-overflow-scrolling: touch;   /*这句是为了滑动更顺畅*/
  /*position: relative;*/
  height: 100%;
}
</style>
